import { useEffect,useState,useMemo ,If} from "react"
import { Table,Card,Form,Input,Button,Modal,Popconfirm} from "antd"
import { queryWork,queryWorkDetail,updateWork,removeWork } from "../../../../utils/request/api"
export default ()=>{
    useEffect(()=>{
       getWork(1,2)
    },[])
    let [workList,setWorkList]=useState([])// 工单
    let [detailList,setDetailList]=useState([])// 工单详情
    let [total,setTotal]=useState(0)// 总数
    let [cutId,setCutId]=useState(0)// 展示的工单id
    const [form]=Form.useForm()// 全局表单对象 
    let [isOpenWork,setIsOpenWork]=useState(false)// 详情展开
    let [isSave,setIsSave]=useState(false)// 详情展开
    
    const getWork=(pageNum,pageSize,filter={})=>{// 获取工单列表
        queryWork({pageNum,pageSize,...filter})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                setWorkList(res.data)
                setTotal(res.pages.total)
            }
        })
    }
    const getDetail=(id)=>{
        console.log(id);
        queryWorkDetail({id})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                setDetailList(res.data.details)
            }
        })
    }
    const renderWork=useMemo(()=>{// 渲染工单
        
          
          const props= {

            columns: [
            {
              title: '姓名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '身份证',
              dataIndex: 'idCard',
              key: 'idCard',
            },
            {
              title: '部门',
              dataIndex: 'depName',
              key: 'depName',
            },
            // fraction
            {
                title: '得分',
                dataIndex: 'fraction',
                key: 'fraction',
            },
            {
                title:"操作",
                key:"controls",
                render:item=><>
                   <Button
                    onClick={()=>{
                        // console.log(item);
                        setIsOpenWork(true)
                        getDetail(item.id)
                        setCutId(item.id)
                    }} 
                    type="primary">详情</Button>
                   &nbsp;
                   &nbsp;
                   &nbsp;
                   {/* <Button type="">修改</Button>
                   &nbsp;
                   &nbsp;
                   &nbsp; */}
                   <Popconfirm
                    title="确定删除此条工单吗?"
                    onConfirm={()=>{
                         removeWork({id:item.id})
                         .then(res=>{
                            console.log(res);
                            if(res.meta.code==200){
                                getWork(1,2)
                            }
                         })
                    }}
                    // onCancel={cancel}
                    okText="确定"
                    cancelText="取消"
                >
                   <Button type="danger">删除</Button>

                </Popconfirm>
                </>
            }
          ],
          dataSource:workList,
          pagination:{// 分页
            total,
            pageSize:2,
            onChange:(page)=>{
                console.log(page);
                let params=form.getFieldsValue()// 获取表单所有字段

                getWork(page,2,params)
            }
          }
        }
          
          return <Table {...props} />;
    },[workList])


    const renderDetail=useMemo(()=>{
          const props={
            columns:[
                {
                    title:"指标",
                    dataIndex:"remarks",
                    key:"remarks"
                },
                {
                    title:"分数",
                    dataIndex:"targetFraction",
                    key:'targetFraction'
                },
                {
                    title:"得分",
                    // dataIndex:"actualFraction",
                    key:"actualFraction",
                    render:(item)=><>
                      <If isShow={isSave}>
                          <Input 
                          value={item.actualFraction} 
                          style={{maxWidth:"100px"}}
                          onChange={(e)=>{
                                //  console.log(e.target.value);
                                 item.actualFraction=e.target.value
                                 setDetailList([...detailList])// 更新视图
                          }} />
                      </If>
                      <If isShow={!isSave}>
                         {item.actualFraction}
                      </If>
                    </>
                },
                // {
                //     title:"修改",
                //     render:(item)=><>
                //       <Button 
                //       type="primary" 
                //       size="small"
                //       onClick={()=>{
                //         console.log(item);
                //       }}
                //       >修改</Button>
                //     </>
                // }
            ],
            dataSource:detailList,
            pagination:false
          }
          return <>
              <Button 
                type="primary" 
                size="small"
                onClick={()=>{
                // console.log(item);
                isSave=true
                setIsSave(isSave)
                // console.log();
                }}
                >修改</Button>
                <br/>
            <Table {...props} />
          </>
    },[detailList,isSave])
    return <div>
        {/* 工单信息 */}
        <Card title="查询工单"  style={{ width: "100%" }}>
        <Form
                    // {...formItemLayout}
                    layout={"inline"}
                    form={form}
                    // initialValues={{
                    //     layout: formLayout,
                    // }}
                    // onValuesChange={onFormLayoutChange}
                    onFinish={()=>{
                        // console.log(form.getFieldsValue());
                        let params=form.getFieldsValue()
                        getWork(1,2,params)
                    }}
                    >
                    
                    <Form.Item label="姓名" name="name">
                        <Input placeholder="搜索员工姓名" />
                    </Form.Item>
                    <Form.Item label="身份证" name="idCard">
                        <Input placeholder="搜索员工身份证" />
                    </Form.Item>
                    <Form.Item label="部门" name="depName">
                        <Input placeholder="搜索员工部门" />
                    </Form.Item>
                    <Form.Item >
                        <Button htmlType="submit" type="primary">查询</Button>
                    </Form.Item>
                    </Form>
        </Card>
        {renderWork}

        <Modal 
        title="查看工单详情" 
        open={isOpenWork}
        width={800}
        okText="确认"
        cancelText="取消"
        // footer={null}
        onOk={()=>{
            // console.log(detailList);
            // console.log(cutId);
            if(!isSave){
                return
            }
            let params={
                id:cutId,
                detailArr:JSON.stringify(detailList.map(v=>{
                    return {
                        detailId:v.id,
                        actualFraction:v.actualFraction
                    }
                }))
            }
            // console.log(params);
            updateWork(params)
            .then(res=>{
                console.log(res);
                if(res.meta.code==200){
                    getWork(1,2)
                    setIsOpenWork(false)
                    setIsSave(false)
                }
            })
        }} 
        onCancel={()=>{
            setIsOpenWork(false)
            setIsSave(false)
        }}
        >
        {renderDetail}
        </Modal>
    </div>
}